<template>
  <div style="width:100%;height:100%;">
        <div class="background"></div>
    <!-- 右侧输入框 -->
    <div id="app" class="all">
        <div class="box1">欢迎使用</div>
        <div class="box2">系统登陆</div>
        <div class="user">
            <div class="user1">用户名</div>
            <span class="user2"></span>
            <input class="user3" type="text"/>
        </div>
        <div class="password"> 
            <div class="user1">密码</div>
            <span class="p2"></span>
            <input class="user3" type="text" />
        </div>
        <button class="button" @click="logins">登陆</button>
    </div>
    <!-- 底部文字 -->
    <div id="app1">
        <div class="title1">ORDER聚造</div>
        <div class="title2">ORDER聚造</div>
        <div class="title3">All Rights Reserved ©2021 版权所有 ｜ 粤ICP备18069755号</div>
    </div>
    <!-- 左边文字和图片 -->
    <div id="app2" class="all1">
        <div class="image1"></div>
        <div class="image2"></div>
        <span class="m1">双线质量管控体</span>
        <span class="m2">力求每件产品、每个细节都尽善尽美</span> 
        <spam class="m3">够专业才放心</spam>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  components: {
    //HelloWorld
  },
  data() {
    return {};
  },
  methods: {},
  created() {},
  mounted() {},
};
</script>

<style>
.background{
    width: 100%;
    height: 100%;
    position: fixed;
    background: url(../../image/background.png) no-repeat;
    background-size: 100% 100%;
}
*{
    margin: 0;
    padding: 0;
}
.all{
    width: 378px;
    height: 378px;
    background: #EFEFF0;
    border-radius: 21px 21px 21px 21px;
    opacity: 0.9;
    position: absolute;
    top:29%;
    right: 6%;
}
.box1{
    width: 55px;
    height: 17px;
    font-size: 14px;
    font-family: MicrosoftYaHeiUI-, MicrosoftYaHeiUI;
    font-weight: normal;
    color: #96A3B0;
    position: relative;
    margin-top:24px;
    margin-left:34px;
    white-space: nowrap;
}
.box2{
    width: 351px;
    height: 90px;
    font-size: 28px;
    font-family: MicrosoftYaHeiUI-Bold-, MicrosoftYaHeiUI-Bold;
    font-weight: bold;
    color: #4E4E4E;
    position: relative;
    margin-top: 6px;
    margin-left: 34px;
}
.user{
    width: 320px;
    height: 39px;
    position: absolute;
    top: 123px;
    left: 32px;
}
.user1{
    width: 40px;
    height: 17px;
    font-size: 14px;
    font-family: MicrosoftYaHeiUI-, MicrosoftYaHeiUI;
    font-weight: normal;
    color: #737474;
    white-space: nowrap;
    margin-top: 11px;
}
.user2{
    width: 13px;
    height: 15px;
    background: url(../../image/user.png) no-repeat;
    position: absolute;
    top: 14px;
    left: 61px;
    z-index: 100;
}
.user3{
    width: 245px; /* 原宽度不适应 */
    height: 39px;
    /* background-color: #F1F1F1; */
    border-radius: 5px 5px 5px 5px;
    opacity: 1;
    border: 1px solid #DFEFFF;
    left: 48px;
    position: absolute;
    top: 0px;
}
/* 设置光标位置 */
input{
    padding-left: 28px;
}
.password{
    width: 320px;
    height: 39px;
    position: absolute;
    top: 191px;
    left: 31px;
}
.p2{
    width: 13px;
    height: 15px;
    background: url(../../image/password.png) no-repeat;
    position: absolute;
    top: 14px;
    left: 61px;
    z-index: 100;
}
.button{
    width: 318px;
    height: 40px;
    background: #409EFF;
    border-radius: 20px 20px 20px 20px;
    border-style: none;
    opacity: 1;
    position: absolute;
    top: 286px;
    left: 33px;
    font-size: 17px;
    font-family: MicrosoftYaHeiUI-, MicrosoftYaHeiUI;
    font-weight: normal;
    color: #F4F4F5;;
}
.title1{
    width: 211px;
    height: 48px;
    opacity: 0.4;
    font-size: 38px;
    font-family: MicrosoftYaHeiUI-Bold-, MicrosoftYaHeiUI-Bold;
    font-weight: normal;
    color: #D7E8FA;
    position: fixed;
    bottom:3% ;
    left: 81.8%;
}
.title2{
    width: 118px;
    height: 26px;
    font-size: 21px;
    font-family: MicrosoftYaHeiUI-Bold-, MicrosoftYaHeiUI-Bold;
    font-weight: bold;
    color: #409EFF;
    position: fixed;
    bottom: 2.7%;
    left: 82.29%;
}
.title3{
    width: 428px;
    height: 17px;
    font-size: 14px;
    font-family: MicrosoftYaHeiUI-Bold-, MicrosoftYaHeiUI-Bold;
    font-weight: bold;
    color: #565656;
    position: fixed;
    bottom: 4%;
    left: 32.6%;
}
.all1{
    width: 18.4%;
    height: 42.4%;
    position: fixed;
    top: 26%;
    left: 6%;
}
.image1{
    width: 8.61%;
    height: 21%;
    background: #E1F2F9;
    opacity: 0.3;
    position: fixed;
    bottom: 52.5%;
    left: 6.25%;
}
.image2{
    width: 9.8%;
    height: 21.3%;
    background: #E1F2F9;
    opacity: 0.3;
    position: fixed;
    bottom: 31.2%;
    left: 11.5%;
}
.m1{
    height: 133px;
    width: 24px;
    font-size: 16px;
    font-family: MicrosoftYaHeiUI-Bold-, MicrosoftYaHeiUI-Bold;
    font-weight: bold;
    color: #FEFEFE;
    writing-mode: vertical-lr;
    writing-mode: tb-lr;
    position: absolute;
    top:13px;
    margin-left: 18%;
}
.m2{
    height: 270px;
    width: 21px;
    font-size: 14px;
    writing-mode: vertical-lr;
    writing-mode: tb-lr;
    font-family: MicrosoftYaHeiUI-Bold-, MicrosoftYaHeiUI-Bold;
    font-weight: bold;
    color: #FFFFFF;
    position: absolute;
    top: 13px;
    margin-left: 35%;
}
.m3{
    height: 205px;
    width: 37px;
    font-size: 25px;
    font-family: MicrosoftYaHeiUI-Bold-, MicrosoftYaHeiUI-Bold;
    writing-mode: vertical-lr;
    writing-mode: tb-lr;
    font-weight: bold;
    color: #6BB9DA;
    line-height: 0;
    position: absolute;
    top: 55px;
    margin-left: 60%;
}

html,body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: Microsoft YaHei UI, Microsoft YaHei UI-Bold;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
/* .app1{
  background:url('/image/test.png');
  height: 300px;
} */
</style>
